<!-- 我的 - 帮助与反馈 - 列表 -->
<template>
  <view>
    <z-navbar title="帮助与反馈" :border-bottom="true"></z-navbar>
    <view class="px-4">
      <u-collapse :head-style="headStyle">
        <u-collapse-item :title="item.title" v-for="(item, index) in state.list" :key="index">
          <view class="collapse-item" v-html="item.content || ''"></view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit mt-1" @click="navigate('add')">意见反馈</view>
    </view>
  </view>
</template>

<script setup>
import { navigate } from "@/common/util/uni";
import { getHelpList } from '@/common/http/module/user'

const state = reactive({
  list: []
})

// 折叠面板样式
const headStyle = {
  color: '#333',
  fontSize: '30rpx',
  fontWeight: 'bold',
  padding: '34rpx 0',
  borderBottom: '2rpx solid #F6F6F6'
}

function loadData() {
  getHelpList().then(res => {
    state.list = res.data
  })
}

onLoad(() => loadData())
</script>

<style lang="scss" scoped>
.collapse-item {
  color: #666666;
  font-weight: 400;
  font-size: 26rpx;
  line-height: 40rpx;
  padding: 32rpx 0;
  border-bottom: '2rpx solid #F6F6F6';
  white-space: pre-wrap;
}
</style>
